<template>
  <div class="dynamic">
    <!-- 主页面布局模块 -->
    <mode-one v-if="showFilingMode === 1"></mode-one>
    <mode-two v-if="showFilingMode === 2"></mode-two>
    <mode-three v-if="showFilingMode === 3"></mode-three>
    <mode-four v-if="showFilingMode === 4"></mode-four>
    <mode-five v-if="showFilingMode === 5"></mode-five>

    <!-- 动态表单弹出框 -->
    <form-modal :dynamicModal="dynamicModal" :modalFormData="modalFormData" :modalFormRules="modalFormRules" :dictionary="dictionary"></form-modal>

    <!-- 标记备注弹出框 -->
    <mark-modal :markModal="markModal"></mark-modal>

    <!-- 查询归卷弹出框 -->
    <rollback-modal :rollbackModal="rollbackModal"></rollback-modal>

    <!-- 修改分类弹出框 -->
    <class-modal :classModal="classModal"></class-modal>

    <!-- 简易搜索弹出框 -->
    <simple-search :simpleModal="simpleModal"></simple-search>

    <!-- 修改轨迹弹出框 -->
    <log-modal :logModal="logModal"></log-modal>

    <!-- 四性检测弹框 -->
    <a-modal
      :maskClosable="false"
      title="四性检测"
      v-model="checkModal.visible"
      width="60%"
      :body-style="{ padding: 0 }">
      <four-check></four-check>
    </a-modal>

    <a-drawer
      placement="bottom"
      :closable="false"
      :visible="textTable.visible"
      height="400"
      :bodyStyle="{ height: '100%',padding: 0 }"
      @close="onClose">
      <text-table></text-table>
    </a-drawer>
  </div>
</template>

<script>
import { ModeOne, ModeTwo, ModeThree, ModeFour, ModeFive, FormModal, MarkModal, RollbackModal, ClassModal, SimpleSearch, LogModal, TextTable } from './components'
import { FourCheck } from '@/components'
export default {
  name: '',
  components: {
    ModeOne,
    ModeTwo,
    ModeThree,
    ModeFour,
    ModeFive,
    FormModal,
    MarkModal,
    RollbackModal,
    ClassModal,
    SimpleSearch,
    LogModal,
    TextTable,
    FourCheck
  },
  data () {
    return {
      showFilingMode: null,
      dynamicModal: {
        title: '', // 动态表单弹出框标题
        visible: false // 动态表单弹出框是否显示
      },
      markModal: {
        title: '', // 标记备注弹出框标题
        visible: false, // 标记备注弹出框是否显示
        markForm: { // 标记备注弹出框表单字段
          pickerColors: '#1890FF',
          pickerContent: '',
          canclePick: ''
        }
      },
      rollbackModal: {
        visible: false // 查询归卷弹出框是否显示
      },
      classModal: {
        visible: false // 修改分类弹框是否显示
      },
      simpleModal: {
        visible: false // 简易搜索弹框是否显示
      },
      logModal: {
        title: '修改轨迹信息', // 修改轨迹弹框标题
        visible: false // 修改轨迹弹框是否显示
      },
      checkModal: {
        visible: false // 四性检测弹框是否显示
      },
      textTable: {
        visible: false
      },
      modalFormData: { // 动态表单弹出框数据对象
        OrderNum: '',
        Year: '',
        Code: '',
        WA_Stock: '',
        Topic: '',
        BGQXData: '',
        SADate: '',
        Security: '',
        JADate: '',
        Op_ID: '',
        Remark: ''
      },
      modalFormRules: { // 动态表单弹出框字段验证规则
        OrderNum: [{ required: true, message: '请输入顺序号', trigger: 'blur' }],
        Year: [{ required: true, message: '请输入年代号', trigger: 'blur' }],
        Topic: [{ required: true, message: '请输入题名', trigger: 'blur' }],
        BGQXData: [{ required: true, message: '请选择保管期限', trigger: 'change' }],
        Security: [{ required: true, message: '请选择保密级别', trigger: 'change' }],
        SADate: [{ required: true, message: '请选择收档日期', trigger: 'change' }],
        JADate: [{ required: true, message: '请选择结案日期', trigger: 'change' }]
      },
      dictionary: {
        BGQXData: [
          {
            DDL_ID: 1,
            DDL_Value: '永久'
          },
          {
            DDL_ID: 2,
            DDL_Value: '30年'
          },
          {
            DDL_ID: 3,
            DDL_Value: '长期'
          }
        ],
        Security: [
          {
            DDL_ID: 4,
            DDL_Value: '保密'
          },
          {
            DDL_ID: 5,
            DDL_Value: '密级'
          },
          {
            DDL_ID: 6,
            DDL_Value: '绝密'
          }
        ]
      }
    }
  },
  watch: {
    $route (route) {
      this.showFilingMode = route.meta.mode
    }
  },
  created () {
    this.showFilingMode = this.$route.meta.mode
  },
  mounted () {
  },
  methods: {
    onClose () {
      this.textTable.visible = false
    }
  }
}
</script>
<style lang="less" scoped>
.dynamic {
  width: 100%;
  height: 100%;
}
</style>
